iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 14
0

今天來看v-if條件渲染吧!什麼是v-if條件渲染?就是一個「如果(if)…」我指定條件達成了,那我才要呈現指定的內容,沒達成的話就是隱藏!聽起來有點抽象,那又該如何使用它?現在就來實做個範例吧!

v-if範例實做

先來寫個簡單的範例!用法很容易,直套用到想要效果的結構上就行:

<template>
  <div class="news">
    <h3 v-if="yes">我學會v-if了!</h3>
  </div>
</template>

<script>
export default {
  name: 'news',
  data() {
    return {
      yes: true
    }
  }
}
</script>

v-if範例解說

  • 我直接在標籤<h3>上加了v-if,並在後面加入我為條件取的名字,我簡單取名叫yes
  • 到data()內加入條件是否成立yes: true(true代表成立,反之false代表不成立)。
    完成後你會看到頁面上的文字內容了!接著可以試著改為yes: false,文字就會被隱藏!好簡單吧!

v-else範例

那有「如果成立(if)」因該也會有「如果不成立(else)」吧?沒錯!對js有點了解的人馬上就會想到這點!而它的寫法當然就會是v-else了,直接加在剛剛的實例試試:

<template>
  <div class="news">
    <h3 v-if="yes">我學會v-if了!</h3>
    <h3 v-else>再讓我試一次</h3>
  </div>
</template>

<script>
export default {
  name: 'news',
  data() {
    return {
      yes: false
    }
  }
}
</script>

完成!直接加上去就行了!不過要記得v-else需要跟在v-if之後喔,這樣它們才會被判斷為一組條件!

那…如果v-if顯示內容很多,怎麼半?直接把v-if放在它們的父層結構就行!比如說:

<div v-if="yes">
  <h3>我學會v-if了!</h3>
  <p>好簡單喔!我馬上就會了!</p>
</div>
<h3 v-else>再讓我試一次</h3>

可是…我不想要多一層<div>只為了包起它們怎麼半?還記得昨天說<template>是隱藏標籤嗎?靠它來幫忙分組就好了:

<template v-if="yes">
  <h3>我學會v-if了!</h3>
  <p>好簡單喔!我馬上就會了!</p>
</template>
<h3 v-else>再讓我試一次</h3>

v-else-if範例

那有多組條件怎麼半?這時就要用v-else-if了:

<template>
  <div class="news">
    <ul>
      <li v-if="item1">打掃房間</li>
      <li v-else-if="item2">上網學習vue</li>
      <li v-else-if="item3">到便利商店領包裹</li>
      <li v-else>今天待辦事項都完成了!</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'news',
  data() {
    return {
      item1: false,
      item2: false,
      item3: false
    }
  }
}
</script>

當事情都完成(條件寫入false)就會出現「今天待辦事項都完成了!」,很實用的功能吧!

v-show

還有一個跟v-if(有條件的渲染)很像的v-show(無條件的渲染)!它的用法跟v-if一樣!簡單說,v-show的差別只在它沒有「如果不成立(else)」這個條件!
那為何還要分v-show出來呢?只要用v-if就好啦!v-show還是有它的優點的,它有更高的初始渲染開銷(簡單說就是:元件切換狀態的速度比較快),因此遇到需要常開關、又沒有條件的需求,當然用v-show比較好!

v-if與route

我再補充一個v-if的常用用法!它可以配合route來設定元件在哪頁才要出現!比如說我有一個網站在未登入時,layout的<header>要顯示「登入」按鈕讓使用者做登入,但如果已經在登入頁了,我就不需要出現它,該怎麼做?簡單寫個例子:

<a v-if="$route.path !='/'">登入</a>

上面看到的是「登入」按鈕,v-if加入條件$route.path !='/loging'

  • 還記得上次學的「Vue[10]-Router( https://ithelp.ithome.com.tw/articles/10204021 )」嗎?我們為每個頁面設定了path:後面是它的網址名稱,$route.path就是在指它!
  • != 這是什麼?「=」號就是等於,那「!」號呢?它是「相反」的意思,也就是「不等於」!
    所以整句的意思是,「如果(v-if):位址不是登入頁(/loging)的話,就出現「登入」按鈕」。

以上就是v-if與v-show的介紹!


上一篇
Vue[13]-V-bind:class
下一篇
Vue[15]-事件處理v-on(一)
系列文
網頁設計靠 Vue.js 轉前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言